<template>
	<scroll-view scroll-y class="page-container">
		<!-- 头部背景和用户信息 -->
		<view class="header-section">
			<u-image width="100%" height="500rpx" src="" mode="aspectFill"></u-image>
			<view class="back-button" @click="goBack">
				<u-icon name="arrow-left" color="#fff" size="22"></u-icon>
			</view>
			<view class="user-info-overlay">
				<view class="user-avatar-container">
					<u-avatar :src="partnerDetail.user.avatar || ''" size="70"></u-avatar>
					<view class="add-friend-icon">
						<u-icon name="plus-circle-fill" color="#FE4B49" size="20"></u-icon>
					</view>
				</view>
				<text class="user-name">{{ partnerDetail.user.name }}</text>
				<text v-if="partnerDetail.user.isInitiator" class="initiator-tag">发起人</text>
			</view>

			<view class="trip-info-card">
				<view class="location-info">
					<view class="location-item">
						<u-image class="location-icon" width="50rpx" height="50rpx" src="@/static/index/zdz/icon_cf.png" mode="widthFix"></u-image> <!-- 出发地图标 -->
						<text class="city-name">{{ partnerDetail.departure.city }}</text>
						<text class="date-text">{{ partnerDetail.departure.date }}</text>
					</view>
					<view class="dots-arrow">
						<u-image width="200rpx" src="@/static/index/zdz/icon_jt.png" mode="widthFix"></u-image>
					</view>
					<view class="location-item end-location">
						<u-image class="location-icon" width="50rpx" height="50rpx" src="@/static/index/zdz/icon_dwcs.png" mode="widthFix"></u-image> <!-- 目的地图标 -->
						<text class="city-name">{{ partnerDetail.returnTrip.city }}</text>
						<text class="date-text">{{ partnerDetail.returnTrip.date }}</text>
					</view>
				</view>
				<view class="trip-title-section">
					<u-tag :text="partnerDetail.statusTag" size="mini" shape="circle" :bgColor="partnerDetail.statusTag === '报名中' ? '#FE4B49' : '#E9E9E9'" :borderColor="partnerDetail.statusTag === '报名中' ? '#FE4B49' : '#D5D5D5'"  :color="partnerDetail.statusTag === '报名中' ? '#FFFFFF' : '#EBEAEA'" plain></u-tag>
					<text class="trip-title">{{ partnerDetail.title }}</text>
				</view>
			</view>
		</view>

		<!-- 报名搭子 -->
		<view class="section-card registered-partners-card">
			<view class="card-header">
				<view class="card-title-bar"></view>
				<text class="card-title">报名搭子</text>
				<view class="card-header-right" @click="viewAllRegistered">
					<text>{{ partnerDetail.totalRegistered }}人已报名</text>
					<u-icon name="arrow-right" color="#EBEAEA" size="14"></u-icon>
				</view>
			</view>
			<view class="partners-registered">
				<view class="partners-list">
					<view class="partner-item" v-for="(partner, index) in partnerDetail.registeredPartners" :key="index" @click="viewUserProfile(partner.id)">
						<view class="partner-avatar-wrapper">
							<u-avatar :src="partner.avatar || ''" size="48" mode="aspectFill"></u-avatar>
							<!-- <view :class="['confirm-status-icon', partner.gender === 'male' ? 'male' : 'female']">
								<u-icon :name="partner.status === '已确认' ? 'checkmark' : (partner.status === '待确认' ? 'question-circle' : 'pause-circle')" color="#fff" size="10"></u-icon>
							</view> -->
						</view>
						<text class="partner-name">{{ partner.name }}</text>
						<u-tag
							:text="partner.status"
							size="mini"
							:bgColor="getPartnerStatusBgColor(partner.status)"
							:borderColor="getPartnerStatusBorderColor(partner.status)"
							:color="getPartnerStatusColor(partner.status)"
							plain
							shape="circle"
							class="partner-status-tag"
						></u-tag>
					</view>
					
				</view>
				<view class="join-waitlist" @click="joinWaitlist">
					<view class="join-icon-wrapper">
						<u-icon name="/static/tabbar/tabbar_fb.png" color="#FF8C3E" size="50"></u-icon>
					</view>
					<text class="join-text">我也要候补</text>
				</view>
			</view>
		</view>

		<!-- 活动详情 -->
		<view class="section-card activity-details-card">
			<view class="card-header">
				<view class="card-title-bar"></view>
				<text class="card-title">活动详情</text>
			</view>
			<view class="details-list">
				<view class="detail-item">
					<u-icon name="clock" size="18" color="#EEEAEA"></u-icon>
					<text class="detail-label">活动时间</text>
					<text class="detail-value">{{ partnerDetail.activityDetails.time }}</text>
				</view>
				<view class="detail-item">
					<u-icon name="calendar" size="18" color="#EEEAEA"></u-icon>
					<text class="detail-label">报名截止</text>
					<text class="detail-value">{{ partnerDetail.activityDetails.deadline }}</text>
				</view>
				<view class="detail-item">
					<u-icon name="coupon" size="18" color="#EEEAEA"></u-icon>
					<text class="detail-label">活动费用</text>
					<text class="detail-value">{{ partnerDetail.activityDetails.cost }}</text>
				</view>
				<view class="detail-item">
					<u-icon name="account" size="18" color="#EEEAEA"></u-icon>
					<text class="detail-label">活动人数</text>
					<text class="detail-value">{{ partnerDetail.activityDetails.participants }}</text>
				</view>
				<view class="detail-item">
					<u-icon name="map" size="18" color="#EEEAEA"></u-icon>
					<text class="detail-label">活动终点</text>
					<text class="detail-value destination-value">{{ partnerDetail.activityDetails.destination }}</text>
					<u-icon name="map-fill" size="18" color="#3378FE"></u-icon>
				</view>
				<view class="detail-item activity-intro">
					<u-icon name="file-text" size="18" color="#EEEAEA"></u-icon>
					<text class="detail-label">活动介绍</text>
					<text class="detail-value intro-text">{{ partnerDetail.activityDetails.introduction }}</text>
				</view>
			</view>
		</view>

		<!-- 平台安全提示 -->
		<view class="section-card safety-tips-card">
			<view class="card-header">
				<view class="card-title-bar orange-bar"></view>
				<text class="card-title">平台安全提示</text>
			</view>
			<view class="safety-content">
				<text v-html="formattedSafetyTips"></text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-action-bar">
			<view class="action-icon-group">
				<view class="action-icon-item" @click="toggleFavorite">
					<u-icon :name="partnerDetail.isFavorite ? 'heart-fill' : 'heart'" :color="partnerDetail.isFavorite ? '#FF5050' : '#000'" size="24"></u-icon>
					<text>收藏</text>
				</view>
				<view class="action-icon-item" @click="share">
					<u-icon name="share" color="#000000" size="24"></u-icon>
					<text>转发</text>
				</view>
			</view>
			<view class="registered-count-preview">
				<u-avatar-group :urls="partnerDetail.registeredPartners.map(p => p.avatar || '')" size="28" gap="0.6" maxCount="3"></u-avatar-group>
				<text class="count-text">{{ partnerDetail.totalRegistered }}人报名</text>
				<u-button class="main-action-button" text="立即候补" shape="circle" color="linear-gradient(to right, #98EBD4, #F7E142)"></u-button>
			</view>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			partnerDetail: {
				backgroundImage: '', 
				user: {
					avatar: '', 
					name: '陌生白',
					isInitiator: true
				},
				departure: {
					city: '杭州',
					date: '4.27出发'
				},
				returnTrip: {
					city: '青海',
					date: '5.5返航'
				},
				title: '4.27-5.5杭州出发, 青甘大环线自驾游, 游二等二, 在线找搭子!',
				statusTag: '报名中', 
				registeredPartners: [
					{ id:1, avatar: '', name: '乙醇钠', status: '已确认', gender: 'female' },
					{ id:2, avatar: '', name: '小阳爱吃瓜', status: '待确认', gender: 'female' },
					{ id:3, avatar: '', name: '我的世界', status: '候补中', gender: 'male' }
				],
				totalRegistered: 3,
				activityDetails: {
					time: '04.27 周日 - 05.05 周一',
					deadline: '04.26 周六 20:00',
					cost: '免费',
					participants: '4人',
					destination: '青海省西宁市城东区德令哈路16号青海湖旅游',
					destinationIcon: '', 
					introduction: '本人旅行发烧友, 风象星座, P人不赶路党, 能开车, 机酒和行程都可以商量, 我这边有2个人, 想要再找2个人同行, 年龄性别不限, 费用AA, 欢迎不矫情不道德绑架的宝子来联系我~'
				},
				safetyTips: '使用本平台时, 请务必认准官方认证渠道下载APP或登录网站, 本平台的活动均为自主社交活动, 谨防钓鱼链接, 参与者请结合自身情况自主斟酌。参与活动前请仔细核查发起人身份, 勿轻信旅游陷阱。保护自身隐私, 避免个人财产损失。出行时将行程告知亲友, 保存紧急联络方式, 如遇纠纷或危险, 及时联系平台客服与当地警方。具体相关法律法规可参照《旅游法》以及《中国消费者权益保护法》等。',
				isFavorite: false,
				bottomAction: '立即候补' 
			}
		};
	},
	computed: {
		formattedSafetyTips() {
			return this.partnerDetail.safetyTips
				.replace(/《旅游法》/g, '<text style="color: #FF4C49;">《旅游法》</text>')
				.replace(/《中国消费者权益保护法》/g, '<text style="color: #FF4C49;">《中国消费者权益保护法》</text>');
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		viewUserProfile(userId) {
			console.log('View user profile:', userId);
		},
		viewAllRegistered() {
			console.log('View all registered partners');
		},
		joinWaitlist() {
			console.log('Join waitlist');
		},
		toggleFavorite() {
			this.partnerDetail.isFavorite = !this.partnerDetail.isFavorite;
		},
		share() {
			console.log('Share action');
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
		},
		handleMainAction() {
			console.log('Main action:', this.partnerDetail.bottomAction);
		},
		getPartnerStatusBgColor(status) {
			if (status === '已确认') return '#FE7131';
			if (status === '待确认') return '#F0EFEF';
			if (status === '候补中') return '#F0EFEF';
			return '#F5F5F5';
		},
		getPartnerStatusBorderColor(status) {
			if (status === '已确认') return '#FE7131';
			if (status === '待确认') return '#F0EFEF';
			if (status === '候补中') return '#F0EFEF';
			return '#E0E0E0';
		},
		getPartnerStatusColor(status) {
			if (status === '已确认') return '#FFFFFF';
			if (status === '待确认') return '#FF8C3E';
			if (status === '候补中') return '#000C2A';
			return '#EEEAEA666';
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	background-color: #0C1A4C; 
	background-size: 100% 100%;
	padding-bottom: 170rpx; 
}

.header-section {
	position: relative;
	height: 680rpx; 
	.back-button {
		position: absolute;
		top: calc(var(--status-bar-height) + 20rpx);
		left: 30rpx;
		background-color: rgba(0, 0, 0, 0.3);
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	.user-info-overlay {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 260rpx; 
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 10000;
		.user-avatar-container {
			position: relative;
			margin-bottom: 10rpx;
			border: 4rpx solid #fff;
			border-radius: 50%;
			.add-friend-icon {
				position: absolute;
				bottom: -16rpx;
				right: 44rpx;
			}
		}
		.user-name {
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			margin: 8rpx 0;
		}
		.initiator-tag {
			background-color: #FE772E;
			border-radius: 40rpx;
			font-size: 20rpx;
			height: 30rpx;
			line-height: 30rpx;
			color: #fff;
			padding: 0 20rpx;
		}
	}
	.trip-info-card {
		position: absolute;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
		background: linear-gradient(to bottom,#2C2144,#031D4E);
		.location-info {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 20rpx;
			.location-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				.location-icon { margin-bottom: 8rpx; }
				.city-name { font-size: 28rpx; color: #FFFFFF; font-weight: bold;margin: 20rpx 0;}
				.date-text { font-size: 22rpx; color: #EBEAEA; }
				&.end-location { .city-name, .date-text {text-align: right;} }
			}
			.dots-arrow {
				height: 30rpx;
			}
		}
		.trip-title-section {
			display: flex;
			align-items: center;
			.trip-title {
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: 500;
				line-height: 1.5;
				margin-left: 10rpx;
				flex: 1;
			}
		}
	}
}

.section-card {
	background: linear-gradient(to bottom,#132E49,#092656);
	border-radius: 20rpx;
	margin: 30rpx;
	padding: 20rpx 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.card-title-bar {
			width: 12rpx;
			height: 32rpx;
			background: linear-gradient(to right,#FC6A46,#F9AF3F); 
			border-radius: 6rpx;
			margin-right: 16rpx;
			&.orange-bar { background-color: #FF8C3E;}
		}
		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			flex-grow: 1;
		}
		.card-header-right {
			font-size: 24rpx;
			color: #EBEAEA;
			display: flex;
			align-items: center;
		}
	}
}

.registered-partners-card {
	.partners-registered{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.join-waitlist {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			.join-icon-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 8rpx;
			}
			.join-text {
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}
	}
	.partners-list {
		display: flex;
		flex-wrap: wrap; 
		align-items: center;
		.partner-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			// width: calc((100% - 90rpx) / 4); 
			&:nth-child(4n) { margin-right: 0;}

			.partner-avatar-wrapper {
				position: relative;
				margin-bottom: 8rpx;
				.confirm-status-icon {
					position: absolute;
					top: 0;
					right: -2rpx;
					width: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					
				}
				.male {
					top:-8rpx!important;
				}
				.female { 
					
				}
			}
			.partner-name {
				font-size: 24rpx;
				color: #FFFFFF;
				margin: 20rpx 0 10rpx 0;
				text-align: center;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.partner-status-tag {
				transform: scale(0.9);
			}
			
		}
	}
}

.activity-details-card {
	.details-list {
		.detail-item:last-child{
			border: none;
		}
		.detail-item {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #EEEAEA;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #96A4B4;
			&:last-child { margin-bottom: 0;}
			.detail-label {
				margin-left: 16rpx;
				color: #FFFFFF;
				font-weight: 500;
				width: 140rpx; 
				flex-shrink: 0;
			}
			.detail-value {
				flex-grow: 1;
				color: #EEEAEA;
				line-height: 1.5;
				&.destination-value {
					margin-right: 10rpx;
				}
			}
			.destination-icon {
				flex-shrink: 0;
			}
			&.activity-intro {
				align-items: flex-start;
				.intro-text { word-break: break-all; }
			}
		}
	}
}

.safety-tips-card {
	.safety-content {
		font-size: 24rpx;
		color: #EEEAEA;
		line-height: 1.6;
	}
}

.bottom-action-bar {
	position: fixed;
	bottom: 50rpx;
	left: 20rpx;
	right: 20rpx;
	border-radius: 40rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	.action-icon-group {
		display: flex;
		align-items: center;
		.action-icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 20rpx;
			color: #000;
			margin-right: 40rpx;
			text { margin-top: 4rpx;}
		}
	}
	.registered-count-preview {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: 20rpx;
		background-color: #F3F3F3;
		padding-left: 20rpx;
		border-start-start-radius: 40rpx;
		border-end-start-radius: 40rpx;
		border-radius: 40rpx;
		height: 80rpx;
		.count-text {
			font-size: 24rpx;
			color: #000;
			margin-left: 10rpx;
			background-color: #F3F3F3;
		}
	}
	.main-action-button {
		height: 80rpx;
		width: 220rpx;
		margin-left: 20rpx;
		margin-right: -10rpx;
	}
}
</style>